<template>
	<view>
	
	<view class="header">
		温馨提示:规格名称不能修该,只能删除.
	</view>
		
<!-- 基础用法 -->
<uni-swipe-action>
    <uni-swipe-action-item :options="options" @click="onClick" @change="change" v-show="delateButton">
        <view class='cont'>S码 <image src="../../static/images/arrow_right.png" mode=""></image></view>
    </uni-swipe-action-item>
</uni-swipe-action>
	<view class="addButton">
		<button type="primary" @click="addInput">+ 添加规格属性</button>
	</view>
	
	<!-- 添加新规格弹窗 -->
	<uni-popup ref="popup" type="center">
		<view class="addContent">
			<view class="box">
				<view class="tit tCenter f36 c333">请输入规格名称</view>
				<view class="input-box">
					<input type="text" value="最多输入12个字符" />
				</view>
				<view class="btn f30 tCenter">
					<view class="dropBtn" @click="close">取消</view>
					<view class="submit">确定</view>
				</view>
			</view>
		</view>
	</uni-popup>
	</view>

</template>

<script>
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		data() {
			return {
				options:[
				     {
				            text: '删除',
				            style: {
				                backgroundColor: '#dd524d'
				            }
				        }
				      ],
					  delateButton:true,//删除
			}
		},
		    components: {
		        uniSwipeAction,
		        uniSwipeActionItem,
				uniPopup
		    },
		methods: {
			  onClick(e){
			      console.log('当前点击的是第'+e.index+'个按钮，点击内容是'+e.content.text)
				  
			    },
			    change(open){
			      console.log('当前开启状态：'+ open)
			    },
				addInput(){
					this.$refs.popup.open()
				},
				close() {
					this.$refs.popup.close()
				},
		}
	}
</script>

<style lang="scss">

	.header{
		height: 91rpx;
		line-height: 91rpx;
		background-color:#f5f5f5;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(102,102,102,1);
		padding-left: 32rpx;

	}
.cont{
	width: 100%;
	
height: 104rpx;

border-bottom: 2rpx solid #cccccc;
position: relative;
font-size:32rpx;
font-family:PingFang SC;
font-weight:500;
color:rgba(51,51,51,1);
padding:30rpx 30rpx;
box-sizing: border-box;
image{
	width: 17rpx;
	height: 33rpx;
	vertical-align: middle;
	position: absolute;
	right: 30rpx;
}

}
.addButton{
	width: 100%;
	position: fixed;
	bottom: 0;
}
</style>
